<template>
    <div class="View">
        <div class="page-view">
            <div class="describe">
                <!-- <span>{{$t('message.homePageTable.title')}}</span> -->
                <div class="router">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item v-for="(proRoute, index) in projectRouteData" :key="index">{{ proRoute.Title
                            }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="desribe-view">
                    <div class="left-describe">
                        <i class="el-icon-back"></i>
                        <span class="solid"></span>
                        <i class="el-icon-refresh"></i>
                        <span class="solid"></span>
                        <i class="iconfont search">&#xe824;</i>
                        <el-autocomplete v-model="search" clearable class="left-describe-ipt"
                            :fetch-suggestions="querySearchAsync"></el-autocomplete>
                    </div>
                    <p class="r-describe">
                        <button class="black-btn">
                            <i class="iconfont">&#xe825;</i>
                            <span>{{ $t("message.public.uploaded") }}</span>
                        </button>
                        <button class="black-btn">
                            <i class="iconfont">&#xe826;</i>
                            <span>{{
                                $t("message.homePageTable.newProject")
                                }}</span>
                        </button>
                        <i class="el-icon-delete-solid"></i>
                    </p>
                </div>
            </div>
            <div class="tableView">
                <div ref="tableCot">
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                        :max-height="tableHeight" :header-cell-style="{
                            color: 'rgba(144,147,153,1)',
                            fontSize: '16px',
                            textAlign: 'left',
                            backgroundColor: '#F8F8F8',
                        }" :cell-style="{
                            color: 'rgba(96,98,102,1)',
                            backgroundColor: '#F8F8F8',
                            fontSize: '14px',
                            textAlign: 'left',
                        }" :row-style="{
                            color: 'rgba(96,98,102,1)',
                            backgroundColor: '#F8F8F8',
                            fontSize: '13px',
                            textAlign: 'left',
                        }" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="45"></el-table-column>
                        <el-table-column :label="$t('message.homePageTable.name')">
                            <template slot-scope="scope">
                                <el-image style="
                                        width: 18px;
                                        height: 18px;
                                        margin-right: 20px;
                                    " :src="genFileExtIcn(scope.row)"></el-image>
                                <span style="cursor: pointer" class="pushCADStyle" v-if="scope.row.fileType == 1">{{
                                    scope.row.name + `.${scope.row.ext}`
                                }}</span>
                                <span v-if="scope.row.fileType == 2" style="cursor: pointer" class="pushCADStyle">{{
                                    scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="size" :label="$t('message.homePageTable.size')">
                            <template slot-scope="scope">{{
                                scope.row.size + " KB"
                                }}</template>
                        </el-table-column>
                        <el-table-column prop="modifyTime" :label="$t('message.homePageTable.updated')"
                            sortable></el-table-column>
                        <el-table-column prop="userName" :label="$t('message.homePageTable.userName')"
                            width="120"></el-table-column>
                        <el-table-column prop="status" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status == 1" style="color: red">{{
                                    $t("message.homePageTable.unfinished")
                                }}</span>
                                <span v-if="scope.row.status == 2" style="color: red">{{
                                    $t("message.homePageTable.uploaded")
                                }}</span>
                                <span v-if="scope.row.status == 3" style="color: red">{{
                                    $t(
                                        "message.homePageTable.changingFiles"
                                    )
                                }}</span>
                                <!-- <span v-if="scope.row.status == 4">{{$t('message.homePageTable.finished')}}</span> -->
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('message.homePageTable.action')">
                            <template slot-scope="scope">
                                <el-dropdown placement="bottom-start" trigger="hover">
                                    <span class="el-dropdown-link">
                                        <i class="el-icon-s-unfold"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <div class="dropdown-view" v-if="scope.row.fileType == 1">
                                            <i class="iconfont">&#xe6c4;</i>
                                            <span>{{
                                                $t(
                                                    "message.homePageTable.browse"
                                                )
                                            }}</span>
                                        </div>
                                        <div class="dropdown-view">
                                            <i class="iconfont">&#xe6c5;</i>
                                            <span>{{
                                                $t(
                                                    "message.homePageTable.rename"
                                                )
                                            }}</span>
                                        </div>
                                        <div class="dropdown-view" v-if="scope.row.fileType == 1">
                                            <i class="iconfont">&#xe6c6;</i>
                                            <span>{{
                                                $t(
                                                    "message.homePageTable.download"
                                                )
                                            }}</span>
                                        </div>
                                        <div class="dropdown-view">
                                            <i class="iconfont">&#xe6c7;</i>
                                            <span>{{
                                                $t(
                                                    "message.homePageTable.moveOrCopy"
                                                )
                                            }}</span>
                                        </div>
                                        <div class="dropdown-view">
                                            <i class="iconfont">&#xe6c8;</i>
                                            <span>{{
                                                $t(
                                                    "message.homePageTable.delete"
                                                )
                                            }}</span>
                                        </div>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="Pagination-box">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="tableForm.pageIndex" :page-size="tableForm.pageSize" :page-sizes="[10, 20, 30]"
                    layout=" prev, pager, next" :total="total" background></el-pagination>
            </div>
            <el-dialog :title="$t('message.public.uploaded')" :visible.sync="centerDialogVisible" width="30%" center
                :append-to-body="true" @close="closeDialog">
                <el-upload class="upload-demo" drag :action="action" multiple ref="upload" style="textalign: center"
                    :on-error="uploadFalse" :on-success="uploadSuccess" :auto-upload="false"
                    :before-upload="beforeAvatarUpload" :data="form" :file-list="fileList" :headers="token">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        {{ $t("message.homePageTable.downloadmsg") }}
                        <em>{{ $t("message.homePageTable.finishedFile") }}</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                        {{ $t("message.homePageTable.uploadedTip") }}
                    </div>
                </el-upload>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="onCancel" size="small">{{
                        $t("message.public.cancel")
                        }}</el-button>
                    <el-button type="primary" size="small" @click="submitUpload()">{{ $t("message.public.confirm")
                        }}</el-button>
                </span>
            </el-dialog>
            <el-dialog :title="$t('message.homePageTable.rename')" :visible.sync="fileNameFlag" width="30%" center
                :append-to-body="true">
                <el-form label-position="right" label-width="80px" :model="formLabelAlign">
                    <el-form-item label="File Name">
                        <el-input v-model="formLabelAlign.fileName" size="small"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="fileNameFlag = false">{{
                        $t("message.public.cancel")
                        }}</el-button>
                    <el-button type="primary" size="small" @click="submitFileName()">{{ $t("message.public.confirm")
                        }}</el-button>
                </span>
            </el-dialog>
        </div>
        <!-- 选择想复制到/移动到的文件夹 -->
        <div class="newProjectDialogView" v-if="copyProjectDialogFlag">
            <div class="newProjectDialog">
                <div class="title">
                    <span>{{
                        $t("message.homePageTable.changeMoveOrCopy")
                        }}</span>
                    <i class="el-icon-close" @click="copyProjectDialogFlag = false"></i>
                </div>
                <div class="body">
                    <p class="tipMessage">
                        {{ $t("message.homePageTable.destinationFolder") }}
                    </p>
                    <el-cascader :options="options" :props="{
                        checkStrictly: true,
                        value: 'value',
                        label: 'label',
                    }" clearable v-model="cascaderValue" class="cascader"></el-cascader>
                    <div class="footer">
                        <button class="footer-btn" @click="MoveCopyProject(1)">
                            {{ $t("message.homePageTable.move") }}
                        </button>
                        <button class="footer-btn" @click="MoveCopyProject(2)">
                            {{ $t("message.homePageTable.copy") }}
                        </button>
                        <button class="footer-btn" @click="
                            (copyProjectDialogFlag = false),
                            (cascaderValue = [])
                            ">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新建文件夹 -->
        <div class="newProjectDialogView" v-if="newProjectDialogFlag">
            <div class="newProjectDialog">
                <div class="title">
                    <span>{{ $t("message.homePageTable.newProject") }}</span>
                    <i class="el-icon-close" @click="(newProjectDialogFlag = false), (value = '')"></i>
                </div>
                <div class="body">
                    <p class="tipMessage">
                        {{ $t("message.homePageTable.projectName") }}
                    </p>
                    <el-input :placeholder="$t('message.homePageTable.inputPlaceholder')
                        " v-model="value" class="cascader"></el-input>
                    <div class="footer">
                        <!-- <button class="footer-btn" @click="newProjectDialogFlag = false,value=''">Cancel</button>
            <button class="footer-btn" @click="addProjectFun">{{$t('message.public.confirm')}}</button>-->
                        <el-button @click="
                            (newProjectDialogFlag = false), (value = '')
                            " size="small">{{ $t("message.public.cancel") }}</el-button>
                        <el-button type="primary" size="small" @click="addProjectFun">{{ $t("message.public.confirm")
                            }}</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    GetFile,
    // DelFile,
    updateFile,
    getNewFile,
    addNewFolder,
    excuteNewFile,
    getAllFolder,
    delNewFile,
    getPartentFolder,
} from "@/api/api";
import BASE from "@/utils/base";
import { getLocalStorage } from "@/utils/storage";
import $ from "jquery";
import _process from "@/utils/proess.js";
// 导出模块
export default {
    // 模块名字
    name: "HomePageView",
    // 模块数据
    data() {
        //数据
        return {
            value: "",
            moveCopyRow: "",
            cascaderValue: [],
            newProjectDialogFlag: false,
            copyProjectDialogFlag: false,
            tableData: [],
            total: 0,
            tableForm: {
                pageIndex: 1,
                pageSize: 20,
                fileID: "",
                userID: getLocalStorage("userID"),
                fileType: 0,
            },
            fileList: [],
            action: BASE.IP + "/api/File/addNewFile",
            token: {
                Authorization:
                    "Bearer " +
                    (sessionStorage.token && getLocalStorage("token")
                        ? sessionStorage.token
                        : ""),
            },
            centerDialogVisible: false,
            form: {
                creator: getLocalStorage("userID"),
                modifier: getLocalStorage("userID"),
                UserID: getLocalStorage("userID"),
                ParentID: "0",
            },
            multipleSelection: [],
            formLabelAlign: {
                id: "",
                fileName: "",
            },
            fileNameFlag: false,
            tableHeight: 590,
            connection: "", //signalr连接
            messages: [], //返回消息
            search: "",
            options: [],
            parentID: "0",
            next_level_id: "0",
            restaurants: [],
            noDataParentId: "0",
            projectRouteData: [
                {
                    Title: "Disk",
                },
            ],
        };
    },
    // 注册组件
    components: {},
    // 监听指定值，只有指定值变化，才会触发
    watch: {},
    // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
    methods: {
        genFileExtIcn(inData) {
            if (inData.fileType == "2")
                return require("@/assets/file/folder.png");
            return _process.getFileIcon(inData.name + "." + inData.ext);
        },

        handleSizeChange(val) {
            this.tableForm.pageSize = val;
            this.getNewFileApi(
                this.parentID,
                "",
                this.tableForm.pageIndex,
                this.tableForm.pageSize,
                this.tableForm.fileType
            );
        },
        handleCurrentChange(val) {
            this.tableForm.pageIndex = val;
            this.getNewFileApi(
                this.parentID,
                "",
                this.tableForm.pageIndex,
                this.tableForm.pageSize,
                this.tableForm.fileType
            );
        },
        getData() {
            GetFile(this.tableForm).then((res) => {
                this.tableData = [];
                this.total = 0;
                if (res.data.code != 0) {
                    return;
                }
                this.tableData = res.data.data;
                this.total = res.data.count;
            });
        },
        //获取新文件列表
        getNewFileApi(parentID, fileName, pageIndex, pageSize, fileType) {
            let temp = `{
                                "code":0,"msg":"OK","count":5,
                                "data":[
                                        {"id":"460c91a1-bd2f-45e7-97df-5682bd5a71a5",
                                        "name":"TestFolder1",
                                        "fileType":2,
                                        "parentID":"0",
                                        "grandID":"0",
                                        "mD5":null,
                                        "ext":null,
                                        "size":397,
                                        "status":4,
                                        "modelType":4,
                                        "path":"http://192.168.33.200:8085/FileSummary/TestFolder2",
                                        "createTime":"2021-11-18 16:23:17",
                                        "creater":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "modifyTime":"2021-11-18 16:23:17",
                                        "modifier":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userID":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userName":"超级管理员",
                                        "sourcePath":"http://192.168.33.200:8085/Cause/ImageFile/TestFolder2"
                                        },
                                                                                {"id":"460c91a1-bd2f-45e7-97df-5682bd5a71a5",
                                        "name":"TestFolder2",
                                        "fileType":2,
                                        "parentID":"0",
                                        "grandID":"0",
                                        "mD5":null,
                                        "ext":null,
                                        "size":397,
                                        "status":4,
                                        "modelType":4,
                                        "path":"http://192.168.33.200:8085/FileSummary/TestFolder2",
                                        "createTime":"2021-11-18 16:23:17",
                                        "creater":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "modifyTime":"2021-11-18 16:23:17",
                                        "modifier":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userID":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userName":"超级管理员",
                                        "sourcePath":"http://192.168.33.200:8085/Cause/ImageFile/TestFolder2"
                                        },
                                        {"id":"460c91a1-bd2f-45e7-97df-5682bd5a71a5",
                                        "name":"TestDocFile",
                                        "fileType":1,
                                        "parentID":"0",
                                        "grandID":"0",
                                        "mD5":null,
                                        "ext":"docx",
                                        "size":397,
                                        "status":4,
                                        "modelType":4,
                                        "path":"http://192.168.33.200:8085/FileSummary/TestFolder2",
                                        "createTime":"2021-11-18 16:23:17",
                                        "creater":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "modifyTime":"2021-11-18 16:23:17",
                                        "modifier":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userID":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userName":"超级管理员",
                                        "sourcePath":"http://192.168.33.200:8085/Cause/ImageFile/TestFolder2"
                                        },
                                        {"id":"460c91a1-bd2f-45e7-97df-5682bd5a71a5",
                                        "name":"Test",
                                        "fileType":2,
                                        "parentID":"0",
                                        "grandID":"0",
                                        "mD5":null,
                                        "ext":null,
                                        "size":397,
                                        "status":4,
                                        "modelType":4,
                                        "path":"http://192.168.33.200:8085/FileSummary/TestFolder2",
                                        "createTime":"2021-11-18 16:23:17",
                                        "creater":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "modifyTime":"2021-11-18 16:23:17",
                                        "modifier":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userID":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userName":"超级管理员",
                                        "sourcePath":"http://192.168.33.200:8085/Cause/ImageFile/TestFolder2"
                                        },
                                        {"id":"460c91a1-bd2f-45e7-97df-5682bd5a71a5",
                                        "name":"TestPptFile",
                                        "fileType":1,
                                        "parentID":"0",
                                        "grandID":"0",
                                        "mD5":null,
                                        "ext":"pptx",
                                        "size":397,
                                        "status":4,
                                        "modelType":4,
                                        "path":"http://192.168.33.200:8085/FileSummary/TestFolder2",
                                        "createTime":"2021-11-18 16:23:17",
                                        "creater":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "modifyTime":"2021-11-18 16:23:17",
                                        "modifier":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userID":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userName":"超级管理员",
                                        "sourcePath":"http://192.168.33.200:8085/Cause/ImageFile/TestFolder2"
                                        },
                                                                                {"id":"460c91a1-bd2f-45e7-97df-5682bd5a71a5",
                                        "name":"TestJpgFile",
                                        "fileType":2,
                                        "parentID":"0",
                                        "grandID":"0",
                                        "mD5":null,
                                        "ext":"jpg",
                                        "size":397,
                                        "status":4,
                                        "modelType":4,
                                        "path":"http://192.168.33.200:8085/FileSummary/TestFolder2",
                                        "createTime":"2021-11-18 16:23:17",
                                        "creater":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "modifyTime":"2021-11-18 16:23:17",
                                        "modifier":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userID":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userName":"超级管理员",
                                        "sourcePath":"http://192.168.33.200:8085/Cause/ImageFile/TestFolder2"
                                        },
                                        {"id":"460c91a1-bd2f-45e7-97df-5682bd5a71a5",
                                        "name":"TestXlsFile",
                                        "fileType":1,
                                        "parentID":"0",
                                        "grandID":"0",
                                        "mD5":null,
                                        "ext":"xlsx",
                                        "size":397,
                                        "status":4,
                                        "modelType":4,
                                        "path":"http://192.168.33.200:8085/FileSummary/TestFolder2",
                                        "createTime":"2021-11-18 16:23:17",
                                        "creater":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "modifyTime":"2021-11-18 16:23:17",
                                        "modifier":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userID":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userName":"超级管理员",
                                        "sourcePath":"http://192.168.33.200:8085/Cause/ImageFile/TestFolder2"
                                        },
                                                                                {"id":"460c91a1-bd2f-45e7-97df-5682bd5a71a5",
                                        "name":"TestPngFile",
                                        "fileType":1,
                                        "parentID":"0",
                                        "grandID":"0",
                                        "mD5":null,
                                        "ext":"png",
                                        "size":397,
                                        "status":4,
                                        "modelType":4,
                                        "path":"http://192.168.33.200:8085/FileSummary/TestFolder2",
                                        "createTime":"2021-11-18 16:23:17",
                                        "creater":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "modifyTime":"2021-11-18 16:23:17",
                                        "modifier":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userID":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userName":"超级管理员",
                                        "sourcePath":"http://192.168.33.200:8085/Cause/ImageFile/TestFolder2"
                                        },
                                        {"id":"460c91a1-bd2f-45e7-97df-5682bd5a71a5",
                                        "name":"TestPdfFile",
                                        "fileType":1,
                                        "parentID":"0",
                                        "grandID":"0",
                                        "mD5":null,
                                        "ext":"pdf",
                                        "size":397,
                                        "status":4,
                                        "modelType":4,
                                        "path":"http://192.168.33.200:8085/FileSummary/TestFolder2",
                                        "createTime":"2021-11-18 16:23:17",
                                        "creater":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "modifyTime":"2021-11-18 16:23:17",
                                        "modifier":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userID":"e1e307d3-7b6f-4ab4-9d00-fd9cf8b29117",
                                        "userName":"超级管理员",
                                        "sourcePath":"http://192.168.33.200:8085/Cause/ImageFile/TestFolder2"
                                        }
                                ]
                        }`;
            let tempData = JSON.parse(temp);

            this.tableData = [];
            this.total = 0;

            this.tableData = tempData.data;
            this.total = tempData.count;
            this.next_level_id = this.tableData[0].grandID;
            this.parentID = this.tableData[0].parentID;
            this.form.ParentID = this.tableData[0].parentID;
            this.noDataParentId = this.tableData[0].parentID;

            return;

        },
        //新建文件夹
        addNewFolderApi(parentID, name) {
            let dataJson = {
                id: "",
                parentID: parentID,
                name: name,
                creator: getLocalStorage("userID"),
            };
            console.log(dataJson);
            addNewFolder(dataJson).then((res) => {
                if (res.data.code != 0) {
                    this.$alert("登録できません", '', {
                        confirmButtonText: 'OK',
                        type: 'warning',
                    });

                    return;
                }
                this.newProjectDialogFlag = false;
                this.value = "";
                this.getNewFileApi(
                    this.parentID,
                    "",
                    this.tableForm.pageIndex,
                    this.tableForm.pageSize,
                    this.tableForm.fileType
                );
            });
        },
        addProjectFun() {
            this.addNewFolderApi(this.parentID, this.value);
        },
        //文件上传成功触发
        uploadSuccess(response, file, fileList) {
            if (response.code == 0) {
                this.getNewFileApi(
                    this.parentID,
                    "",
                    this.tableForm.pageIndex,
                    this.tableForm.pageSize,
                    this.tableForm.fileType
                );
                this.fileList = [];
                this.$message({
                    message: this.$t("message.homePageTable.suploaded"),
                    type: "success",
                });
                this.centerDialogVisible = false;
            } else {
                this.$alert(this.$t("message.homePageTable.euploaded"), '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });
            }
        },
        //文件上传失败触发
        uploadFalse(response, file, fileList) {
            this.$alert('システムエラーが発生しました。ご迷惑をお掛けして申し訳御座いません。システム管理者に問い合わせください。', '', {
                confirmButtonText: 'OK',
                type: 'warning',
            });

        },
        // 上传前対文件的大小和类型的判断
        beforeAvatarUpload(file) {
            this.form.fileName = file.name;
            if (file.size > 524288000) {
                this.$alert(this.$t('message.public.tip2'), '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });
                return false;
            }

        },
        //表单提交
        submitUpload() {
            this.$refs.upload.submit();
        },
        //表单取消
        onCancel() {
            this.fileList = [];
            this.centerDialogVisible = false;
        },
        closeDialog() {
            this.fileList = [];
        },
        //文件削除
        delectData(row) {
            this.$confirm(
                this.$t("message.public.filetips"),
                this.$t("message.public.delete"),
                {
                    confirmButtonText: this.$t("message.public.confirm"),
                    cancelButtonText: this.$t("message.public.cancel"),
                    type: "warning",
                }
            )
                .then(() => {
                    let data = {
                        id: [row.id],
                    };
                    delNewFile(data).then((res) => {
                        let totalPage = Math.ceil(
                            (this.total - 1) / this.tableForm.pageSize
                        );
                        let currentPage =
                            this.tableForm.pageIndex > totalPage
                                ? totalPage
                                : this.tableForm.pageIndex;
                        this.tableForm.pageIndex =
                            this.tableForm.pageIndex < 1 ? 1 : currentPage;
                        this.getNewFileApi(
                            this.parentID,
                            "",
                            this.tableForm.pageIndex,
                            this.tableForm.pageSize,
                            this.tableForm.fileType
                        );
                    });
                })
                .catch(() => { });
        },
        downData(row) {
            let name = row.name + "." + row.ext;
            let url = row.sourcePath;
            this.fdownload(url, name);
        },
        fdownload(url, filename) {
            let _this = this;
            this.getBlob(url, function (blob) {
                _this.saveAs(blob, filename);
            });
        },
        getBlob(url, cb) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.responseType = "blob";
            xhr.onload = function () {
                if (xhr.status === 200) {
                    cb(xhr.response);
                }
            };
            xhr.send();
        },
        saveAs(blob, filename) {
            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob, filename);
            } else {
                var link = document.createElement("a");
                var body = document.querySelector("body");
                link.href = window.URL.createObjectURL(blob);
                link.download = filename;
                // fix Firefox
                link.style.display = "none";
                body.appendChild(link);
                link.click();
                body.removeChild(link);
                window.URL.revokeObjectURL(link.href);
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        tableDataDelete() {
            if (this.multipleSelection.length == 0) {
                return;
            }
            let id_list = [];
            for (let i = 0; i < this.multipleSelection.length; i++) {
                id_list.push(this.multipleSelection[i].id);
            }
            this.$confirm(
                this.$t("message.public.filetips"),
                this.$t("message.public.delete"),
                {
                    confirmButtonText: this.$t("message.public.confirm"),
                    cancelButtonText: this.$t("message.public.cancel"),
                    type: "warning",
                }
            )
                .then(() => {
                    let data = {
                        id: id_list,
                    };
                    delNewFile(data).then((res) => {
                        let totalPage = Math.ceil(
                            (this.total - 1) / this.tableForm.pageSize
                        );
                        let currentPage =
                            this.tableForm.pageIndex > totalPage
                                ? totalPage
                                : this.tableForm.pageIndex;
                        this.tableForm.pageIndex =
                            this.tableForm.pageIndex < 1 ? 1 : currentPage;
                        this.getNewFileApi(
                            this.parentID,
                            "",
                            this.tableForm.pageIndex,
                            this.tableForm.pageSize,
                            this.tableForm.fileType
                        );
                    });
                })
                .catch(() => { });
        },
        editFileName(row) {
            this.fileNameFlag = true;
            this.formLabelAlign.id = row.id;
            this.formLabelAlign.fileName = row.name;
            console.log(row);
        },
        submitFileName() {
            updateFile(this.formLabelAlign).then((res) => {
                this.fileNameFlag = false;
                if (res.data.code != 0) {
                    this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
                    return;
                }
                // this.getData();
                this.getNewFileApi(
                    this.parentID,
                    this.search,
                    this.tableForm.pageIndex,
                    this.tableForm.pageSize,
                    this.tableForm.fileType
                );
            });
        },
        pushCAD(row) {
            let EXT = row.ext.toLowerCase();
            // if (
            //     EXT == "png" ||
            //     EXT == "jpg" ||
            //     EXT == "gif" ||
            //     EXT == "bmp" ||
            //     EXT == "jpeg" ||
            //     EXT == "tif" ||
            //     EXT == "tiff"
            // ) {
            //     var { href } = this.$router.resolve({
            //         name: "CAD",
            //         query: {
            //             id: row.id,
            //             radioType: -1,
            //         },
            //     });
            // } else {
            //     var { href } = this.$router.resolve({
            //         name: "PicView",
            //         query: {
            //             id: row.id,
            //         },
            //     });
            // }
            var { href } = this.$router.resolve({
                name: "CAD",
                query: {
                    id: row.id,
                    radioType: -1,
                },
            });

            let newWindow = window.open(href, "_blank");
        },
        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString
                ? restaurants.filter(this.createStateFilter(queryString))
                : restaurants;
            cb(results);
        },
        createStateFilter(queryString) {
            return (state) => {
                return (
                    state.value
                        .toLowerCase()
                        .indexOf(queryString.toLowerCase()) === 0
                );
            };
        },
        handleSelect(item) {
            console.log(item);
        },
        //进入文件夹
        enterProject(row) {
            this.parentID = row.id;
            this.form.ParentID = row.id;
            this.getNewFileApi(
                row.id,
                "",
                1,
                this.tableForm.pageSize,
                this.tableForm.fileType
            );
        },
        getAllFolderApi() {
            getAllFolder().then((res) => {
                console.log(res);
                if (res.data.code != 0) {
                    return;
                }
                this.options = JSON.parse(res.data.data);
            });
        },
        // 移动复制文件夹
        excuteNewFileApi(operationType, sourceID, targetID) {
            let dataJson = {
                operationType: operationType,
                sourceID: sourceID,
                targetID: targetID,
            };
            excuteNewFile(dataJson).then((res) => {
                this.cascaderValue = [];
                if (res.data.code != 0) {
                    return;
                }
                this.copyProjectDialogFlag = false;
                this.getNewFileApi(
                    this.parentID,
                    "",
                    this.tableForm.pageIndex,
                    this.tableForm.pageSize,
                    this.tableForm.fileType
                );
            });
        },
        MoveCopyProject(operationType) {
            // console.log(this.cascaderValue,this.moveCopyRow);
            this.excuteNewFileApi(
                operationType,
                this.moveCopyRow.id,
                this.cascaderValue.pop()
            );
        },
        focusGetData() {
            let dataJson = {
                parentID: this.parentID,
                fileName: "",
                pageIndex: 1,
                pageSize: 10000,
                fileType: 0,
            };
            this.restaurants = [];
            getNewFile(dataJson).then((res) => {
                if (res.data.code != 0) {
                    return;
                }
                let restaurants = res.data.data;
                restaurants.forEach((Item) => {
                    this.restaurants.push({
                        value: Item.name,
                        id: Item.id,
                    });
                });
            });
        },
        searchData() {
            this.getNewFileApi(this.parentID, this.search, 1, 10000, 0);
        },
        projectClick() { },
    },
    // 创建前状态(里面是操作)
    beforeCreate() { },
    // 创建完毕状态(里面是操作)
    created() {
        this.getNewFileApi(
            this.parentID,
            "",
            this.tableForm.pageIndex,
            this.tableForm.pageSize,
            this.tableForm.fileType
        );
        // this.getData();
        let that = this;
        this.$nextTick(function () {
            let heightStyle = $(".page-view").height() - 200;
            that.tableHeight = heightStyle;
        });
        // 后台推送
        // this.$socket.on("ReceiveMessage", function (id, status) {
        //     if (id && status) {
        //         for (let i = 0; i < that.tableData.length; i++) {
        //             if (that.tableData[i].id == id) {
        //                 that.tableData[i].status = status;
        //             }
        //         }
        //     }
        // });
        // this.$socket.start();
    },
    // 挂载前状态(里面是操作)
    beforeMount() { },
    // 挂载结束状态(里面是操作)
    mounted() {
        const that = this;
        this.$nextTick(function () {
            window.onresize = () => {
                return (() => {
                    let heightStyle = $(".page-view").height() - 200;
                    that.tableHeight = heightStyle;
                })();
            };
            if ($(".LeftMenu").width() == 64) {
                $(".View").width($(".Content").width() - 64);
            } else if ($(".LeftMenu").width() == 192) {
                $(".View").width($(".Content").width() - 192);
            }
        });
    },
    // 更新前状态(里面是操作)
    beforeUpdate() { },
    // 更新完成状态(里面是操作)
    updated() {
        // 使用querySelectorAll选中所有带有.elx-cell--checkbox类的元素
        var elements = document.querySelectorAll('.elx-cell--checkbox');

        // 遍历这些元素  
        elements.forEach(function (element) {
            // 修改每个元素的title属性  
            element.setAttribute('title', '');
        })
    },
    // 销毁前状态(里面是操作)
    beforeDestroy() { },
    // 销毁完成状态(里面是操作)
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
    width: calc(100% - 192px);
    height: 100%;

    .page-view {
        position: relative;
        // width: calc(100% - 112px);
        height: 100%;
        margin: 16px 0 0 0;
        // background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        // border: 1px solid #b4b4b4;
        padding: 0 24px;

        .describe {
            font-size: 16px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
            padding: 0 0 8px 0px;
            font-weight: bold;

            .desribe-view {
                margin-top: 12px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .left-describe {
                display: flex;
                align-items: center;
                justify-content: flex-start;

                .solid {
                    width: 1px;
                    height: 19px;
                    background: #ededed;
                    margin: 0 16px;
                }

                .el-icon-back,
                .el-icon-refresh,
                .search {
                    font-size: 24px;
                    cursor: pointer;
                }

                .left-describe-ipt {
                    width: 200px;
                    margin-left: 8px;

                    ::v-deep .el-input__inner {
                        border: 0 none;
                        border-bottom: 1px solid #dcdfe6;
                        font-weight: 500;
                        font-size: 14px;
                        border-radius: 0;
                        background: #f8f8f8;
                        height: 28px;
                    }

                    ::v-deep .el-input .el-input__clear {
                        line-height: 28px;
                    }
                }
            }
        }

        .black-btn {
            padding: 0 8px;
            height: 32px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            // background: #213d49;
            border-radius: 4px;
            font-weight: 500;
            margin: 0 8px;
            border: 1px solid #d9d9d9;

            span {
                margin: 0 0 0 8px;
            }
        }

        .r-describe {
            display: flex;
            align-items: center;

            .el-icon-upload2,
            .el-icon-download,
            .el-icon-delete-solid,
            .el-icon-refresh {
                font-size: 24px;
                // color: rgba(144, 147, 153, 1);
                margin: 0 8px;
                cursor: pointer;
            }
        }

        .footer {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 47px;
            line-height: 47px;
            border-top: 1px solid rgba(229, 229, 229, 1);

            span {
                font-size: 14px;
                color: rgba(0, 0, 0, 0.45);
                margin-left: 34px;
            }
        }
    }

    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #fff1f0 !important;
    }

    .el-icon-s-unfold {
        font-size: 24px;
        position: relative;
        cursor: pointer;
    }
}

.pushCADStyle {
    cursor: pointer;
    transition: 0.2s;
}

.pushCADStyle:hover {
    color: #409eff;
    border-bottom: 2px solid #409eff;
}

.Pagination-box {
    position: absolute;
    right: 32px;
    bottom: 80px;

    ::v-deep .el-pagination.is-background .btn-next,
    ::v-deep .el-pagination.is-background .btn-prev,
    ::v-deep .el-pagination.is-background .el-pager li {
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        border: 1px solid rgba(217, 217, 217, 1);
    }

    // ::v-deep .el-pagination.is-background .el-pager li {
    //   background:rgba(30,30,30,1);
    //   color:rgba(255,255,255,1);
    // }
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #213d49;
        color: rgba(255, 255, 255, 1);
    }

    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: none;
    }
}

.dropdown-view {
    width: 160px;
    height: 40px;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;

    .iconfont {
        font-size: 24px;
        margin: 0 8px;
    }
}

.dropdown-view:hover {
    background: #fff1f0;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #213d49;
    border-color: #213d49;
    color: #001529;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #213d49;
    border-color: #213d49;
    color: #001529;
}

::v-deep .el-checkbox__inner:hover {
    background-color: #213d49;
}

::v-deep .el-checkbox__inner:hover {
    background-color: #213d49;
    color: #001529;
}

::v-deep .el-checkbox__inner:hover {
    border-color: #213d49;
}

.search {
    // margin-left: 16px;
    color: #606266;
    font-weight: 500;
    cursor: pointer;
}

.newProjectDialogView {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;

    // background: rgba(0, 0, 0, 0.2);
    .newProjectDialog {
        position: absolute;
        width: 488px;
        height: 208px;
        background: #ffffff;
        box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03),
            0px 9px 28px 0px rgba(0, 0, 0, 0.05),
            0px 6px 16px -8px rgba(0, 0, 0, 0.08);
        transform: translate(-50%, -30%);
        left: 50%;
        top: 30%;

        .title {
            width: 100%;
            height: 40px;
            background: #fafafa;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 18px;
            font-size: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);

            .el-icon-close {
                cursor: pointer;
            }
        }

        .body {
            height: calc(100% - 40px);
            width: 100%;
            padding: 0 24px;

            .tipMessage {
                padding: 16px 0 8px 0;
            }

            .cascader {
                width: 100%;
                height: 32px;

                ::v-deep .el-input__inner {
                    height: 32px;
                }
            }

            .footer {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-top: 34px;

                .footer-btn {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 4px;
                    min-width: 82px;
                    height: 32px;
                    background: #ffffff;
                    border: 1px solid #d9d9d9;
                    margin-left: 16px;
                }
            }
        }
    }
}

.tableIcon {
    font-size: 20px;
    margin: 0 4px;
}

.upload-demo {
    width: 360px;
    margin: 0 auto;
}

::v-deep .el-breadcrumb__inner {
    cursor: pointer;
}
</style>